Reactivity: intro

今まででhtmlを画面に描画できるようになったが、一度描画されたらそれで終わりのただの静的なサイト。

状態を持たせてそれが変わったら、自動で更新するような動的なサイトにしたい

-> Reactivity System を実装したい!

今回実装したい開発者のインターフェース

code: examples/playground/main.ts

import { createApp, h, reactive } from 'chibivue'

const app = createApp({

setup() {

const state = reactive({ count: 0 }) //　ステートを定義

const increment = () => { // ステートを書き換える関数

state.count++

}

return () =>

h('div', { id: 'my-app' }, [

])

},

})

app.mount('#app')

setup というオプションでステートをもち、render 関数を return する開発者インタフェース

vuejsに実際にある記法

実現したいこと

setup 関数を実行することで戻り値から vnode 取得用の関数を得る

reactive 関数に渡したオブジェクトをリアクティブにする

ボタンをクリックすると、ステートが更新される

ステートの更新を追跡して render 関数を再実行し、画面を再描画する